<wxs src='@/utils/filter.wxs' module='filter'></wxs>
<template>
	<view class="bg_f5">
		<topTitle :name="title" :size="`f17`" back bg right class="bg-theme"/>
		<view class="content">
			<view class="order bg_w">
				<view class="">订单号：{{order.platform_order_no}}</view>
				<view class="mt14">订单金额（本币）：{{filter.price(order.platform_amount,1)}}</view>
				<view class="mt14">运单号：{{order.deliver_order_no}}</view>
				<view class="mt14">平台名称：{{order.platform_name}}</view>
				<view class="mt14">店铺名称：{{order.shop_name}}</view>
			</view>
			<!-- <view class="bg_w msg">
				<view class="tit f16 fw"><i class="net"/>面单信息</view>
				<view class="flex f-a-c j-s-b li mt10">
					<text class="color-6 w-s-n">订单号</text>
					<view class="flex f-a-c">
						<input type="text" v-model="order.deliver_order_no" placeholder="请输入订单号" class="orderNo f14"/>
						<uni-icons type="clear" v-if="order.deliver_order_no" class="clear color6 f18 m-lf11" @click="order.deliver_order_no = ''"/>
					</view>
				</view>
				<view class="flex f-a-c j-s-b li">
					<text class="color-6 w-s-n">订单金额（本币）</text>
					<text>{{filter.price(order.platform_amount,1)}}</text>
				</view>
			</view> -->
			<view class="take bg_w">
				<view class="tit f16 fw"><i class="net"/>拍照</view>
				<view class="flex f-a-c j-s-b mt38 f14 cause" v-if="type == 'err'">
					<text>异常原因</text>
					<uni-data-select
					:localdata="errList"
					:placeholder="`选择异常原因`"
					@change="changeSelect"
					/>
				</view>
				<view class="list flex f-w-w" :class="type == 'err'? 'mt12':'mt32'">
					<view v-for="(item,index) in takeList" :key="index" class="box">
						<image :src="item" lazy-load class="img"></image>
						<uni-icons type="clear" class="clear color-theme" @click="clear(index)"/>
					</view>
					<view class="takeIco box flex j-c-c" @click="handTake">
						<i class="iconfont icon-take f36" style="margin: auto;"/>
					</view>
				</view>
			</view>
			<view class="btn os">
				<view class="bg-theme color-w f16 nav" @click="set">
					{{type == 'detail'?'确定收货':type == 'err'?'申报异常':'确认发货'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
		title: '发货',
		error_type: '',
		order: '',
		type: '',
		takeList: [],
		errList:[] ,//异常理由列表,
		user: wx.getStorageSync('userInfo')
    }
  },
  onLoad(op) {
		if(op.order){
			this.order = JSON.parse(op.order);
			console.log(this.order,'this.order');
			this.type = op.type;
			this.title = op.type == 'err'?'申报异常': this.user.type == 2 && op.type != 'err'?'发货':'物流签收'
		}
		this.getErrList()
  },
  methods: {
		clear(i){
			this.takeList.splice(i,1)
		},
		set(){//提交
			let { type, order, util, api, error_type, takeList, user } = this;
			let url = api.apiSetDelivery;
			let data = { };
			// takeList = ['https://cpxt.xmshensou.com/uploads/20240124/0cc48745b1384299f46be113128fd587.png']
			if(type == 'err'){//异常发货/签收
				url = user.type == 2?api.apiDeliveryError:api.apiSignError;
				data = {
					error_type,
					pic_url: takeList.join(','),
				}
				if(user.type != 2) data.sign_order_money = order.platform_amount;
				// if(!order.deliver_order_no) {
				// 	this.util.log('请填写订单号')
				// 	return
				// }
			}else{//发货提交/签收提交
				if(user.type == 2){ //发货
					if(!order.deliver_order_no) {
						this.util.log('请填写订单号')
						return
					}
					data = {
						deliver_pic_url: takeList.join(','),
						deliver_order_no: order.deliver_order_no,
						deliver_order_money: order.platform_amount
					}
				}else{//签收
					url = api.apiSign;
					data = {
						sign_pic_url: takeList.join(','),
						sign_order_money: order.platform_amount,
						sign_time: new Date().getTime()
					}
				}
			}
			if(takeList.length <= 0){
				this.util.log('请上传照片')
				return
			}
			util.req(url,{...data,...{task_id: order.id}}).then(res=>{
				this.util.log('成功')
				setTimeout(()=>{
					uni.navigateBack(1)
				},1000)
				console.log(res,6666);
			})
		},
		
		getErrList(){ //异常理由
			this.util.req(this.api.apiErrorTypeList,{
				from: uni.getStorageSync('userInfo').type == 2?3:4
			}).then(res=>{
				res.map(ele=>{
					Object.assign(ele,{
						text: ele.value,
						value: ele.key
					})
				})
				this.errList = res;
			})
		},
		changeSelect(e){//选择异常理由
			this.error_type = e;
		},
		handTake(){//上传图片
			uni.chooseImage({
				sizeType:['compressed'],
				count: 1,
				success: (e) => {
					uni.showLoading()
					console.log(e.tempFilePaths[0],'e.tempFilePaths');
					uni.uploadFile({
						url: this.api.apiUpload, //仅为示例，非真实的接口地址
						filePath: e.tempFilePaths[0],
						name: 'file',
						formData: {
							channel: 'app',
							token: uni.getStorageSync('userInfo').token
						},
						success: (res) => {
							uni.hideLoading();
							this.takeList.push(JSON.parse(res.data).data.fullurl)
							// this.takeList.push() = JSON.parse(res.data).data.url;
						},
						fail:err=> {
							uni.hideLoading();
						}
					});
				}
			});
		}
  }
}
</script>

<style lang="scss">
	page{
		background: #f5f5f5;
		.order,
		.take,
		.msg{
			padding: 50rpx 20rpx;
			background: #fff;
			border-radius:16rpx;
			margin: 28rpx 32rpx 0;
		}
		.msg{
			.li{
				padding: 36rpx 0;
				border-bottom: 2rpx solid #f5f5f5;
				.orderNo{
					text-align: right;
					// width: 90%;
					margin-left: 40rpx;
				}
			}
			.li:nth-last-child(1){
				border: 0;
				padding-bottom: 0;
			}
		}
		.list{
			.box{
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				margin-right: 24rpx;
				margin-bottom: 24rpx;
				position: relative;
				.clear{
					position: absolute;
					right: -10px;
					top: -8px;
				}
				.img{
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}
			.takeIco{
				background: #f5f5f5;
			}
		}
		.btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			.nav{
				padding: 32rpx 0;
				text-align: center;
				line-height: 1;
				margin: 4rpx 30rpx;
				border-radius: 20rpx;
			}
		}
		.cause{
			border-bottom: 2rpx solid #f5f5f5;
			padding-bottom: 36rpx;
		}
	}
</style>
